<template>
  <div class="detail">
    <DetailNav :titles="titles" class="detailNav"> </DetailNav>
    <DetailSwiper :topImages="topImages"></DetailSwiper>

    <div class="goods">
      <!--  文字介绍 -->
      <p v-if="goods" class="pro">
        <span>[{{ goods.shopInfo.name }}]</span>{{ goods.itemInfo.title }}
      </p>

      <!--  价格 -->
      <p v-if="goods" class="price">
        <span class="nowPrice">￥{{ goods.itemInfo.highNowPrice }}</span>
        <span class="oldPrice">￥{{ goods.itemInfo.highPrice }}</span>
      </p>

      <!-- 销量 收藏  -->
      <p v-if="goods" class="secose">
        <span class="sell">{{ goods.columns[0] }}</span>
        <span class="collect">{{ goods.columns[1] }}</span>
        <span class="send">{{ goods.columns[2] }}</span>
      </p>
      <p v-if="goods" class="fahuo">
        <span v-for="item in goods.shopInfo.services" :key="item.name">
          <img :src="item.icon" />
          {{ item.name }}
        </span>
      </p>

      <!-- 店铺信息 -->
      <div class="market" v-if="goods">
        <div class="logo">
          <a :href="goods.shopInfo.shopId"><img :src="goods.topBar.img" /></a>
        </div>
        <div class="xiaoliang">
          <div>
            <span class="top">{{ goods.shopInfo.cSells }}</span> <br /><br />
            <span class="bottom">总销量</span>
          </div>

          <div>
            <p v-for="item in goods.shopInfo.score" :key="item.name">
              {{ item.name }}: &nbsp;&nbsp;&nbsp;&nbsp;{{ item.score }}
            </p>
          </div>
        </div>
      </div>
      <van-button class="btn" type="danger">进店逛逛</van-button>
    </div>

    <div v-if="detailInfo">
      <DetailCommon :detailInfo="detailInfo"></DetailCommon>
    </div>

    <!-- 获取用户评论 -->
    <div v-if="commentInfo">
      <UserCommon :commentInfo="commentInfo"></UserCommon>
    </div>

    <!-- 获取推荐 -->
    <div v-if="recommends">
      <Recommend :recommends="recommends"></Recommend>
    </div>
  </div>
</template>

<script>
import DetailNav from './children/DetailNav.vue'
import DetailSwiper from './children/DetailSwiper.vue'
import DetailCommon from './children/DeatilCommon.vue'
import UserCommon from './children/UserCommon.vue'
import Recommend from './children/Recommend'
export default {
  name: 'detail',
  data() {
    return {
      iid: null,
      titles: ['商品', '参数', '详情', '推荐'],
      topImages: [],
      goods: false,
      detailInfo: false,
      itemParams: false,
      commentInfo: false,
      recommends: false
    }
  },
  components: {
    DetailNav,
    DetailCommon,
    UserCommon,
    DetailSwiper,
    Recommend
  },
  created() {
    this.iid = this.$route.params.iid

    // 第一个请求:获取详情页的数据,
    this.$axios({
      url: '/detail',
      params: {
        iid: this.iid
      }
    }).then((res) => {
      console.log(res.data.result)

      // 获取顶部轮播图商品信息
      this.topImages = res.data.result.itemInfo.topImages

      // 获取商品信息
      this.goods = res.data.result

      // 获取detailInfo
      this.detailInfo = res.data.result.detailInfo

      // 获取itemParams
      this.itemParams = res.data.result.itemParams

      // 获取用户评论信息
      if (res.data.result.rate.cRate !== 0) {
        this.commentInfo = res.data.result.rate.list[0]
      }
    })

    //  第二个请求:请求推荐的数据
    this.$axios({
      url: '/recommend'
    }).then((res) => {
      console.log(res)
      this.recommends = res.data.data.list
    })
  }
}
</script>

<style scoped>
.detail {
  position: relative;
  z-index: 99;
  background-color: #fff;
}

.btn {
  margin-left: 150px;
  margin-top: 30px;
  margin-bottom: 100px;
}

.pro {
  height: 38px;
  font-size: 16px;
  font-weight: 600;
}

.pro span {
  font-size: 20px;
  font-weight: bold;
}

.nowPrice {
  margin-left: 5px;
  font-size: 24px;
  color: orange;
}
.oldPrice {
  margin-left: 20px;
  font-size: 16px;
  text-decoration: line-through;
  color: #ccc;
}
.secose {
  display: flex;
}
.secose span {
  flex: 1;
  text-align: center;
  font-size: 15px;
  color: #999;
}
.market img {
  height: 30px;
  margin-left: 10px;
  margin-top: 8px;
}
.fahuo {
  font-size: 14px;
  color: #999;
}
.fahuo span {
  display: inline-block;
  width: 30%;
  margin-left: 20px;
  margin-top: 10px;
}

.fahuo span:nth-of-type(2),
.fahuo span:nth-of-type(4) {
  margin-left: 130px;
}
.fahuo img {
  width: 20px;
  vertical-align: top;
}

.xiaoliang {
  display: flex;
  margin-left: 20px;
  margin-top: 10px;
}
.xiaoliang > div {
  flex: 1;
}
.xiaoliang p {
  margin: 0;
  padding: 0;
  color: #999;
  margin-top: 5px;
}
.xiaoliang .top {
  font-size: 20px;
  font-weight: 500;
  color: #998;
}
.xiaoliang .bottom {
  font-size: 24px;
  color: #998;
}
</style>
